import { useEffect } from "react";
import { message, Popconfirm } from "antd";
import { ButtonGroup, Button, Card as SemiCard, Row, Col, List } from "@douyinfe/semi-ui";
import { IconDelete, IconDownload, IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import GatewayCard from "../components/gateway.card";
import OrganizationFullInfo from "../components/organization/full.info";

const GatewayOrganizations = () => {
    const { windowInnerHeight } = useModel("global");
    const { selectedGateway, organizationLoading, organizations, loadOrganizations, selectedOrganization } = useModel("gateway.info");
    const { setCurrentGateway, setCurrentOrganization, asyncOrganizationInfo, deleteOrganization } = useModel("gateway.info");

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={5}>
                    <GatewayCard cardBodyHeight={cardBodyHeight} handleSelectedGateway={setCurrentGateway} />
                </Col>
                <Col span={5}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>组织列表</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        headerExtraContent={<Button icon={<IconRefresh />} onClick={loadOrganizations}></Button>}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 1, height: cardBodyHeight - 2, overflow: "auto" }}
                    >
                        <List
                            loading={organizationLoading}
                            dataSource={organizations}
                            renderItem={(item) => (
                                <List.Item
                                    className={`list-item ${selectedOrganization?.uuid === item?.uuid ? "list-selected-item" : ""}`}
                                    main={
                                        <div>
                                            <div style={{ color: "var(--semi-color-text-0)", fontWeight: 500 }}>{item?.fullName || "-"}</div>
                                        </div>
                                    }
                                    onClick={() => setCurrentOrganization(item)}
                                ></List.Item>
                            )}
                        />
                    </SemiCard>
                </Col>
                <Col span={14}>
                    <SemiCard
                        title={
                            <span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>
                                组织信息 - {selectedOrganization.databaseDeployMode === "single" ? "单数据库部署模式" : "多数据库部署模式"}
                            </span>
                        }
                        headerExtraContent={
                            <ButtonGroup>
                                {selectedOrganization?.uuid && (
                                    <Button icon={<IconDownload />} onClick={asyncOrganizationInfo}>
                                        同步组织数据
                                    </Button>
                                )}
                                {selectedOrganization?.uuid && selectedOrganization?.initializationStatus === false && (
                                    <Popconfirm title="确认要移除该组织的信息?" placement="topRight" onConfirm={() => deleteOrganization()}>
                                        <Button icon={<IconDelete style={{ color: "#E91E63" }} />} />
                                    </Popconfirm>
                                )}
                            </ButtonGroup>
                        }
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: 10, height: cardBodyHeight - 2, overflow: "auto" }}
                    >
                        {selectedGateway?.url && selectedOrganization?.uuid && <OrganizationFullInfo />}
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default GatewayOrganizations;
